<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<template>
  <el-row class="header">

  </el-row>
  <el-row>
    <el-col :span="4" class="left">

    </el-col>
    <el-col :span="20" >
      <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
      >
        <el-tab-pane label="入门" name="first">
          <ui>
            <li>
              <span>1</span>
              <span>2</span>
              <span>3</span>
              <span>4</span>
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ui>
        </el-tab-pane>
        <el-tab-pane label="普通" name="second">Config</el-tab-pane>
        <el-tab-pane label="初级" name="third">Role</el-tab-pane>
        <el-tab-pane label="中级" name="fourth">Task</el-tab-pane>
        <el-tab-pane label="高级" name="fourth">Task</el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>

</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.header{
  height: 10vh;
  border:1px solid #e0e0e0;
}

.left{
  border:1px solid #e0e0e0;
  height: 90vh;
}

</style>